<template>
  <div class="device-com">
    <title-com :title="title"></title-com>
    <swiper  :options="swiperOption" class="mt-5">
      <swiper-slide :class="{'current-box':index === currentIndex}" :key="index" v-for="(item,index) in list">
        <div class="wrap" @click="showPop(index)" @mouseenter="showPop(index)" @mouseleave="hidePop(index)">
          <img  :src="getUrl(item.img)"  />
          <div  class="text-wrap">
           <div class="text">
             <h1>{{item.title}}</h1>
             <p class="over-flow-text">
               {{item.description}}
             </p>
           </div>
          </div>
        </div>
      </swiper-slide>
      <!--箭头-->
      <div class="swiper-button-prev icon iconfont icon-cc-arrow-left-circle" slot="button-prev"></div>
      <div class="swiper-button-next icon iconfont icon-cc-arrow-right-circle" slot="button-next"></div>
    </swiper>
  </div>
</template>

<script>
  import titleCom from "./titleCom"
  import { swiper, swiperSlide } from 'vue-awesome-swiper'

  export default {
    props:['title', 'list'],
    computed: {},
    data() {
      return {
        banners:[
          require('../../assets/images/banner-1.jpg'),
          require('../../assets/images/banner-1.jpg'),
          require('../../assets/images/banner-1.jpg'),
          require('../../assets/images/banner-1.jpg'),
          require('../../assets/images/banner-1.jpg'),
          require('../../assets/images/banner-1.jpg'),
          require('../../assets/images/banner-1.jpg'),
          require('../../assets/images/banner-1.jpg'),
        ],
        swiperOption: {
          slidesPerView :4,
          breakpoints: {
/*            //当宽度小于等于480
            414: {
              slidesPerView: 1
            },*/
            //当宽度小于等于480
            767: {
              slidesPerView: 2
            },
            //当宽度小于等于640
            992: {
              slidesPerView: 3
            },
            //当宽度小于等于640
            1200: {
              slidesPerView: 4
            }
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          }
        },
        currentIndex:''
      }
    },
    components: {
      titleCom,
      swiper,
      swiperSlide
    },
    mounted() {

    },
    methods: {
      getBg(url) {
        return {
          backgroundImage: 'url(' + url + ')'
        }
      },
      showPop(index){
        console.log(index)
         this.currentIndex = index
      },
      hidePop(index){
        this.currentIndex = ''
      }
    }
  }
</script>

<style lang="less" scoped>
  @import "~assets/style/public";

.device-com{
  margin-top: 50/@size;
  .swiper-wrapper{
    height: 280/@size;
    overflow: hidden;
  }
  .icon{
    font-size: 30/@size;
    color: @icon-color;
  }
  .swiper-button-prev{
    left: 2/@size;
  }
  .swiper-button-next{
    right: 2/@size;
  }
  .swiper-slide{
    display: flex;
    align-items: center;
    overflow: hidden;
    justify-content: center;
    //margin-right: 20/@size;
    cursor: pointer;
    .wrap{
      position: relative;
      height: 100%;
      background: #FFFFFF;
      img{
        //max-width: 280/@size !important;
        max-height: 320/@size !important;
      }
      .text-wrap{
        display: none;
        border: 1px solid #E5E9F2;
        background: rgba(0,0,0,0.5);
        position: absolute;
        z-index: 100;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        .text{
          font-family: MicrosoftYaHeiUI;
          font-size: 14/@size;
          color: #FFFFFF;
          letter-spacing: 0;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          text-align: center;
          transition: all 0.3s;
          height: 100%;
          p{
            padding: 10/@size;
            line-height: 1.8;
            -webkit-line-clamp: 8;
          }

          h1{
            ont-family: MicrosoftYaHeiUI-Bold;
            font-size: 16/@size;
            color: #FFFFFF;
            letter-spacing: 0;
            text-align: center;
          }
        }

        @keyframes show {
          0% {
            top: 999px;
          }

          100% {
            top: 0px;
          }
        }
      }
    }
  }
  .current-box{
    .text-wrap{
      display: block !important;
      animation: show 0.5s;
    }
  }
}

  @media (min-width: 320px) and (max-width: 767px) {
    .device-com{
      .swiper-wrapper{
        height: 400/@size;
        overflow: hidden;
      }
      .icon{
        font-size: 60/@size;
      }
      .swiper-slide{
        .wrap{
          img{
            max-height: 400/@size !important;
          }
          .text-wrap{
            padding: 0 10/@size;
            .text{
              font-family: @font-title;
              font-size: @font-30;
              h1{
                font-family:@font-title;
                font-size: @font-30;
              }
            }
          }
        }
      }
      .swiper-button-next{
        right: 8/@size !important;
      }
    }
  }



</style>
